﻿/**
 * 	scrollbar 1.0 - jQuery plugin
 *	written by Yu Fangjun	
 *
 *	Copyright (c) 2011 VMSS
 *
 *	Built for insurance
 *
 */

/**
 *	滚动条
 *	markup example for $("#ID").scrollbar();
 *
 *	{String} @direction 滚动条方向
 *	{String} @contentID 滚动内容id
 *	{String} @scrollTrackColor 轨道背景色
 *	{String} @scrollButtonColor 按钮背景色
 *	{String} @scrollButtonHoverColor 鼠标经过背景色
 *	{int} @scrollOpacity 透明度
 *	{int} @scrollSize 滚动条尺寸
 *	{int} @panelWidth 容器宽度
 *	{int} @panelHeight 容器高度
 *	{int} @contentWidth 内容宽度
 *	{int} @contentHeight 内容高度
 *	{int} @scrollbarLeft
 *	{int} @scrollbarBottom
 *	{int} @scrollbarRight
 *	{int} @scrollbarTop
 */
(function($) {

	$.fn.scrollbar = function(options){
 
		var defaults = {
			direction : "x",
			contentID : "",
			scrollTrackColor : "#ccc",
			scrollButtonColor : "#000",
			scrollButtonHoverColor : "#333",
			scrollOpacity : 0.4,
			scrollSize : 9,
			panelWidth : 0,
			panelHeight : 0,
			contentWidth : 0,
			contentHeight : 0,
			scrollbarLeft : 0,
			scrollbarBottom : 0,
			scrollbarRight : 0,
			scrollbarTop : 0			
		};
		var options = jQuery.extend(defaults, options);
		var	panelWidth = options.panelWidth,
				panelHeight = options.panelHeight,
				contentWidth = options.contentWidth,
				contentHeight = options.contentHeight,
				direction = options.direction,
				contentID = options.contentID;
		var scrollbarButtonWidth = Math.ceil(panelWidth * panelWidth / contentWidth);
		var scrollbarButtonHeight = Math.ceil(panelHeight * panelHeight / contentHeight);
		var radius=Math.floor(options.scrollSize/2);
		
		$(this).css({position:"relative"});
		if(direction == "x"){
			if(panelWidth < contentWidth){
				$(this).prepend(
					'<div class="scrollbar_panel" style="position:absolute;bottom:'+options.scrollbarBottom+'px;left:'+options.scrollbarLeft+'px;height:'+options.scrollSize+'px;line-height:'+options.scrollSize+'px;background:'+options.scrollTrackColor+';font-size:0;width:'+panelWidth+'px;border-radius:'+radius+'px;-moz-border-radius:'+radius+'px;-webkit-border-radius:'+radius+'px;">'+
					'	<div class="scrollbar_button" id="xScrollbarButton" style="float:left;width:'+scrollbarButtonWidth+'px;height:'+options.scrollSize+'px;line-height:'+options.scrollSize+'px;background:'+options.scrollButtonColor+';border-radius:'+radius+'px;-moz-border-radius:'+radius+'px;-webkit-border-radius:'+radius+'px;"></div>'+
					'</div>'
				);
				function xScrollFollow(l){
					l = l * (contentWidth / panelWidth);
					$(contentID).css({"margin-left":"-"+l+"px"});
				}
				$("#xScrollbarButton").draggable({
					containment : "parent",
					grid : [1,0],
					axis : 'x',
					start : function(){},
					drag : function(){
						xScrollFollow(parseInt($(this).css("left")));
					},
					stop : function(){}
				});
			}
		}else if(direction == "y"){
			if(panelHeight < contentHeight){
				$(this).append(
					'<div class="scrollbar_panel" style="position:absolute;top:'+options.scrollbarTop+'px;right:'+options.scrollbarRight+'px;width:'+options.scrollSize+'px;background:'+options.scrollTrackColor+';font-size:0;height:'+panelHeight+'px;border-radius:'+radius+'px;-moz-border-radius:'+radius+'px;-webkit-border-radius:'+radius+'px;">'+
					'	<div class="scrollbar_button" id="yScrollbarButton" style="float:left;position:relative;height:'+scrollbarButtonHeight+'px;width:'+options.scrollSize+'px;background:'+options.scrollButtonColor+';border-radius:'+radius+'px;-moz-border-radius:'+radius+'px;-webkit-border-radius:'+radius+'px;"></div>'+
					'</div>'
				);
				var mouseWheelDelta=0;
				$(contentID).bind('mousewheel',function(event, delta, deltaX, deltaY) {
						mouseWheelDelta+=(-delta*30);
						if(mouseWheelDelta<=0){
							mouseWheelDelta=0;
						}else if(mouseWheelDelta>=(panelHeight-scrollbarButtonHeight)){
							mouseWheelDelta=panelHeight-scrollbarButtonHeight;
						}
				    $("#yScrollbarButton").css("top",mouseWheelDelta);
				    yScrollFollow(mouseWheelDelta);
				});
				function yScrollFollow(t){
					t = t * (contentHeight / panelHeight);
					$(contentID).css({"margin-top":"-"+t+"px"});
				}
				$("#yScrollbarButton").draggable({
					containment : "parent",
					grid : [0,1],
					axis : 'y',
					start : function(){},
					drag : function(){
						yScrollFollow(parseInt($(this).css("top")));
					},
					stop : function(){}
				});
			}
		}
		$(".scrollbar_panel").css({opacity:options.scrollOpacity});
		$(".scrollbar_button").bind("mouseenter",function(){
			$(this).css("background",options.scrollButtonHoverColor);
		}).bind("mouseleave",function(){
			$(this).css("background",options.scrollButtonColor);
		});
	};
})(jQuery); 